<script lang="ts" setup>
import { asyncComputed } from "@vueuse/core"
import EqIcon from "./eq-icon.vue";
import EqNumRender from "./render/eq-num-render.vue";
import EqPropsRender from "./render/eq-props-render.vue";
import { useBasicInfoStore, useCharacterStore, useConfigStore } from "@/store";

const props = defineProps({
  eid: {
    type: [Number, String],
    default: 0
  },
  pps: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(["loaded"])
const infoStore = useBasicInfoStore()
const characterStore = useCharacterStore()
const configStore = useConfigStore()
// const equip = ref<Record<string, any>>({})

const equip = asyncComputed(async () => {
  if (props.eid != undefined && (typeof props.eid == "number" || typeof props.eid == "string")) {
    const temp = await infoStore.get_equipment_detail(props.eid, true, characterStore.is_delear, true)
    emit("loaded");
    if (temp?.prop?.effect) {
      temp.prop.bufferProps = temp.prop.effect.filter((a: { label: string }) => a.label.includes("奶系") || a.label.includes("Buff量 +"))
      temp.prop.effect = temp.prop.effect.filter((a: { label: string }) => !(a.label.includes("奶系") || a.label.includes("Buff量 +")))
    }
    return temp
  }
  emit("loaded")
})

const getPPS = (id: number) => {
  const type = infoStore.equipment_info?.merge.find(a => a.id?.toString() == id.toString())?.type ?? ""
  let weaponID: ID = 0
  configStore.single_set.forEach(item => {
    const temp = infoStore.equipment_list?.find(a => a.id?.toString() == item?.toString())
    if (temp && temp.type == type) {
      weaponID = temp.id
    }
  })
  return configStore.merge[weaponID.toString()]?.map(key => infoStore.entry_list?.[key.toString()]).sort((a, b) => (a?.type ?? 0) - (b?.type ?? 0)) ?? []
}
</script>

<template>
  <view v-if="equip?.prop" ref="divref" class="approved-form">
    <view class="epic title" style="display: flex">
      <EqIcon :eq="equip" />
      <view class="eq-name" style="margin-left: 8px">
        <view style="display: flex">
          <text style="width: 100%" :class="equip.rarityClass">
            {{ `${equip.position.includes('称号') || equip.position.includes('宠物') || equip.position.includes("融合") ? "" : "神："}${equip.name}` }}
          </text>
        </view>
        <view class="green">
          {{ '纸飞机计算器' }}
        </view>
      </view>
    </view>
    <view class="">
      <view class="hr" />
      <text class="strong">
        <text style="color: #f3e500">
          最上级
        </text><text> (100%)</text>
      </text>
      <view class="red" style="text-align: right">
        {{ equip.trade }}
      </view>
    </view>
    <view class="yellow" style="text-align: right">
      {{ equip.position }}
    </view>
    <view v-if=" equip.prop.effect && equip.prop.effect.length > 0">
      <view class="hr" />
      <EqNumRender strong :name="equip.name" :ps="equip.prop.effect" />
    </view>
    <view v-if="equip.prop.bufferProps && equip.prop.bufferProps.length > 0">
      <view class="hr" />
      <view class="green" decode="true">
        ﹤辅助职业专属属性﹥
      </view>
      <EqNumRender :name="equip.name" :ps="equip.prop.bufferProps" />
    </view>
    <EqPropsRender v-if="equip.prop.growthProps.length > 0" :eq="equip" />
    <EqPropsRender v-if="equip.type == 10" :eq="equip" :pps="configStore.customize[props.eid.toString()].map(key => infoStore.entry_list?.[key.toString()]) ?? []" />
    <EqPropsRender v-if="equip.name.includes('焚烬龙焰')" :eq="equip" :pps="getPPS(parseInt(props.eid.toString()))" />
    <view class="bottom" style="text-align: center;">
      <view class="hr" />
      <text class="red">
        合成[x]
      </text>
    </view>
  </view>
</template>

<style src="./css/eq-info.scss" scoped></style>

<style src="./css/eq-color.scss" scoped></style>
